<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2011 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div style="background-color: #252525" data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="Progress Interface" data-bb-back-caption="Back" ></div>
	<script src="js/dynamicProgress.js"></script>
	
	<div data-bb-type="round-panel" style="background-color: #252525;color:white;"> 
		<div data-bb-type="panel-header">Create/Remove Progress Bars</div>
		<div id="addRemove" data-bb-type="button" data-bb-style="stretch" onclick="addRemoveIndicator()">Add Progress Bar</div>
		<div id="progressContainer">
		</div>
	</div>
	
	<div data-bb-type="round-panel" style="background-color: #252525;color:white;"> 
		<div data-bb-type="panel-header">Manipulate Progress Bar State</div>
		<div style="margin:20px;">
			<progress id="progress1" value="20" max="100"></progress>
		</div>
		<div id="watch" data-bb-type="button" data-bb-style="stretch" onclick="watchProgress()" style="margin-bottom:10px">Watch Progress</div>
		<div id="pause" data-bb-type="button" data-bb-style="stretch" data-bb-disabled="true" style="margin-bottom:10px" onclick="paused=true;document.getElementById('progress1').setState(bb.progress.PAUSED);">Pause</div>
		<div id="error" data-bb-type="button" data-bb-style="stretch" data-bb-disabled="true" style="margin-bottom:10px" onclick="paused=true;document.getElementById('progress1').setState(bb.progress.ERROR);">Simulate Error</div>
		<div id="reset" data-bb-type="button" data-bb-style="stretch" onclick="percent=4;document.getElementById('progress1').setValue(0);">Reset</div>
		<div id="max" data-bb-type="button" data-bb-style="stretch" style="margin-bottom:10px" onclick="document.getElementById('progress1').setMax(200);">Update Max</div>
	</div>
	<div data-bb-type="round-panel" style="background-color: #252525;color:white;"> 
		<div style="margin:20px;">
			<progress id="progress2" value="60" max="100"></progress>
		</div>
		<div id="show" data-bb-type="button" data-bb-style="stretch" style="margin-bottom:10px" onclick="showProgress()">Show</div>
		<div id="hide" data-bb-type="button" data-bb-style="stretch" style="margin-bottom:10px" onclick="hideProgress()">Hide</div>
	</div>
	
	
	
	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
